/*
  学习目标：受控组件改造,收集用户输入的内容
  1.1. state控制value或者checked
  1.2. onChange配合setState修改数据
 
*/
import React from 'react';

export class Header extends React.Component {
  state = {
    username: '',
    content: '',
  };

  render() {
    const { username, content } = this.state;
    const { handleAdd } = this.props;
    return (
      <form>
        <input
          onChange={(e) => this.setState({ username: e.target.value })}
          value={username}
          className="user"
          type="text"
          placeholder="请输入评论人"
        />
        <br />
        <textarea
          value={content}
          onChange={(e) => this.setState({ content: e.target.value })}
          className="content"
          cols="30"
          rows="10"
          placeholder="请输入评论内容"
        />
        <br />
        <button
          onClick={(e) => {
            // 2.3.
            e.preventDefault();
            handleAdd({ username, content, id: Date.now() });
            this.setState({ username: '', content: '' });
          }}
        >
          发表评论
        </button>
        <button type="button">清空评论</button>
      </form>
    );
  }
}
